<template>
  <div class="app-header">
    <h3>你画我猜</h3>
    <el-tag v-if=connected type="success"><i class="el-icon-success"/>&nbsp;服务已连接</el-tag>
    <el-tag v-else type="warning"><i class="el-icon-warning-outline"/>&nbsp;服务未连接</el-tag>
    <el-tag v-if="false" type="success"><i class="el-icon-success"/>&nbsp;游戏进行中</el-tag>
    <el-tag v-else type="warning"><i class="el-icon-warning-outline"/>&nbsp;游戏未开始</el-tag>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['connected'])
  }
}
</script>

<style scoped>
.el-tag {
  margin-right: 10px;
}
</style>